<template>
  <div style="display: flex;"  :style="{ margin: '24px 16px', padding: '24px' ,backgroundColor:'#FFF' }">
    <a-table size="small" :columns="columnsRole" :data-source="roles" :pagination="false" bordered :loading="isloadingRole"
             rowKey="roleId" style="flex: 1;margin-right: 10px">
      <template slot="action" slot-scope="row">
        <a-space>
          <a @click="onExpand(row)">查看菜单</a>
        </a-space>
      </template>
    </a-table>
    <div style="flex: 1">
      <span class="ant-tag ant-tag-has-color" :class="tipTxt==='请选择要查看菜单的角色'?'noSelect':'select'">
        {{tipTxt}}
      </span>
      <a-table size="small"  :row-selection="rowSelection":columns="columnsMenu" :data-source="menus" :pagination="false" bordered
                rowKey="menuId" :loading="isloadingMenu">
      </a-table>
      <div style="display: flex;justify-content: center;margin-top: 20px ">
        <a-button type="primary" @click="onSubmit">保存修改</a-button>
      </div>
    </div>
  </div>
</template>

<script>

const columnsRole = [
  {title: '角色Id', dataIndex: 'roleId', key: 'roleId',ellipsis: true,},
  {title: '角色名', dataIndex: 'roleName', key: 'roleName'},
  {title: '角色描述', dataIndex: 'description', key: 'description'},
  {title: '操作', key: 'action', scopedSlots: {customRender: 'action'}}
];
const columnsMenu = [
  {title: '菜单ID', dataIndex: 'menuId', key: 'menuId',ellipsis: true,},
  {title: '菜单名', dataIndex: 'menuName', key: 'menuName'},
  {title: '描述', dataIndex: 'menuDescribe', key: 'menuDescribe'},
  {title: '菜单路径', dataIndex: 'menuPath', key: 'menuPath'},
];



export default {
  name: 'RoleMenu',
  data() {
    return {
      isloadingRole:true,
      isloadingMenu:true,
      tipTxt:'请选择要查看菜单的角色',
      menus: [],//所有管理员数据
      selectRole:{},//选中的admin
      roles: [],//所有角色数据
      selectMenuId: [],//选中的admin 拥有的角色
      columnsRole,
      columnsMenu
    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys:this.selectMenuId,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectMenuId=selectedRowKeys

        }
      };
    },
  },
  mounted() {
    this.getAllMenu()
    this.getAllRole()
  },
  methods: {
    getAllMenu() {
      this.$axios({
        method: 'get',
        url: 'menuRole/getMenuAll'
      }).then(res => {
        this.menus = res.data.data
        this.isloadingMenu=false
      })
    },
    getAllRole() {
      this.$axios({
        method: 'get',
        url: 'roleAdmin/getRoleAll'
      }).then(res => {
        this.roles = res.data.data
        this.isloadingRole=false
      })
    },
    onExpand (record) {
      this.$axios({
        method: 'get',
        url: 'menuRole/getSelectMenu?roleId=' + record.roleId,
      }).then(res => {
        this.selectMenuId = res.data.data
        this.selectRole=record
        this.tipTxt='正在修改 {'+ record.roleId+'  '+record.roleName+'} 的菜单'
        console.log(this.selectMenuId)
      })
    },
    onSubmit(){
      this.$axios({
        method: 'get',
        url: 'menuRole/addRoleOfMenu?menus=' + this.selectMenuId.toString()+'&roleId='+this.selectRole.roleId,
      }).then(res => {
        if (res.data.code === "200") {
          this.$message.success('保存成功');
        } else if (res.data.code === -1) {
          this.$message.warning('权限不足');
        } else {
          this.$message.error('保存失败');
        }
      })

    }
  }
}
</script>

<style scoped>
.noSelect{
  background-color: #f50;
  width: 100%;
  font-size: 24px;
  margin-bottom: 10px;
  padding: 5px;
}
.select{
  background-color: #108ee9;
  width: 100%;
  font-size: 24px;
  margin-bottom: 10px;
  padding: 5px;
}
</style>
